<template>
    <div class="container">
        <p class="oneP">提交您的入驻申请</p>
        <div class="rowTwo">
            <ul>
                <li>
                    <p>*姓名</p>
                    <input type="text" v-model="val1" placeholder="请输入姓名（必填）" @focus="inputFocus" @blur="inputBlur" name="username" :class="{phClass: inputFocusName == 'username'}">
                </li>
                <li>
                    <p>*电话</p>
                    <input type="text" v-model="val2" placeholder="请输入电话（必填）" @focus="inputFocus" @blur="inputBlur" name="tel" :class="{phClass: inputFocusName == 'tel'}">
                </li>
                <li>
                    <p>*邮箱</p>
                    <input type="text" v-model="val3" placeholder="请输入邮箱（必填）" @focus="inputFocus" @blur="inputBlur" name="email" :class="{phClass: inputFocusName == 'email'}">
                </li>
            </ul>
            <div>
                <div>
                    <p>媒体简介</p>
                    <input type="text" v-model="val4" placeholder="请输入媒体简介"  @focus="inputFocus" @blur="inputBlur" name="introduce" :class="{phClass: inputFocusName == 'introduce'}">
                </div>
                <div>
                    <button @click="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      val1: "",
      val2: "",
      val3: "",
      val4: "",
      inputFocusName : ''
    };
  },
  methods: {
    submit() {
      if (window.sessionStorage.getItem("userInfo")) {
        if (!(this.val1 == "" || this.val2 == "" || this.val3 == "")) {
          this.$ajax
            .post(this.Ipurl + "joinUs/save", {
              name: this.val1,
              mobile: this.val2,
              email: this.val3,
              content: this.val4,
              userId:JSON.parse(window.sessionStorage.getItem("userInfo")).userId
            })
            .then(res => {
              if(res.data.returnCode==1000){
                  this.$message.success("nice，提交成功")
              }else{
                  this.$message.error("请稍后重试")
              }
            });
        } else {
          this.$message.error("*为必填项");
        }
      } else {
        this.$confirm("检测到您并没有登录", "warning", {
          confirmButtonText: "立即登录",
          cancelButtonText: "不了，谢谢",
          type: "warning"
        }).then(() => {
          this.$router.push("/login");
        });
      }
    },
    inputFocus(e){
      this.inputFocusName = e.target.name;
    },
    inputBlur(){
      this.inputFocusName = '';
    }
  }
};
</script>
<style scoped>
.container {
  width: 1250px;
  height: 332px;
  margin: 0 auto;
  margin-top: 80px;
  background: url("../../assets/img/mediaIn/input.png") no-repeat center center;
  position:relative;
  background-size: cover;
  text-align: center;
  overflow: hidden;
  /* margin-bottom:60px; */
  margin-bottom:80px;
}
.oneP {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
}
.rowTwo {
  margin-top: 35px;
  overflow: hidden;
}
.rowTwo ul {
  margin: 0 auto;
  /* 90 570 660*/
  width: 660px;
  overflow: hidden;
}
.rowTwo li {
  float: left;
  margin-left:15px;
}
.rowTwo li:nth-child(1) {
  margin-left: 0;
}
.rowTwo p {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}
.rowTwo input {
    box-shadow: 2px 2px 17px #ededed;
    margin:5px;
    color: rgb(198, 198, 198) !important;
}
.rowTwo li:nth-child(1) input {
  width: 150px;
  height: 34px;
  font-size: 14px;
  color: rgb(222, 222, 222);
  /* border:1px solid red; */
  padding-left: 15px;
}
.rowTwo li:nth-child(2) input {
  width: 200px;
  height: 34px;
  font-size: 14px;
  color: rgb(222, 222, 222);
  /* border:1px solid red; */
  padding-left: 15px;
}
.rowTwo li:nth-child(3) input {
  width: 220px;
  height: 34px;
  font-size: 14px;
  color: rgb(222, 222, 222);
  /* border:1px solid red; */
  padding-left: 15px;
}
.rowTwo > div {
  width: 660px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 30px;
}
.rowTwo > div > div {
  float: left;
}
.rowTwo > div > div > input {
  width: 500px;
  height: 34px;
  box-shadow: 2px 2px 17px #ededed;
  font-size: 14px;
  color: rgb(222, 222, 222);
  /* border:1px solid red; */
  padding-left: 15px;
}
.rowTwo > div > div > button {
  width: 80px;
  height: 34px;
  color: #fff;
  background: #ee4041;
  border-radius: 5px;
  margin-top: 25px;
  margin-left: 40px;
  /* box-shadow: 0px 4px 19px #ed9191; */
}

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #C6C6C6
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #C6C6C6
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #C6C6C6
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #C6C6C6
}

.phClass::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent
}
.phClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent
}
.phClass::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent
}
.phClass:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent
}
</style>


